<template>
  <div class="lt_select_title">
    <div class="title">
      <p class="main">
        <span>{{ title }}</span>
        <svg
          v-if="more"
          t="1734618976831"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5033"
          width="128"
          height="128"
          class="icon"
        >
          <path
            d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
            p-id="5034"
          ></path>
        </svg>
      </p>
    </div>
    <div class="more"></div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
defineProps({
  title: {
    type: String as PropType<string>,
    required: true,
    default: '标题'
  },
  more: {
    type: Boolean as PropType<boolean>,
    default: true
  }
})
</script>

<style scoped lang="scss">
.lt_select_title {
  .title {
    .main {
      color: #f3f3f3;
      font-weight: 700;
      user-select: none;
      display: flex;
      align-items: center;
      .icon {
        width: 15px;
        height: 15px;
        fill: #f3f3f3;
        font-weight: 700;
        margin-left: 10px;
        margin-left: 5px;
      }
      &:hover {
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
</style>
